<template>
  <div class="custom-page">
    <div class="search-wrap">
      <a-form-model ref="formRef">
        <div class="search-title">查询条件</div>
        <a-row>
          <a-col :span="6">
            <div style="margin-right: 12px">
              <a-form-model-item prop="orderNo"
                ><a-input v-model="queryParam.orderNo" placeholder="请输入单据编号" allowClear />
              </a-form-model-item>
            </div>
          </a-col>
          <a-col :span="6">
            <div style="margin-right: 12px">
              <a-form-model-item prop="state">
                <a-select
                  v-model="queryParam.state"
                  style="width: 100%; margin-top: 4px"
                  placeholder="请选择订单状态"
                  allowClear
                >
                  <a-select-option v-for="(item, index) in stateOptions" :key="index" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </div>
          </a-col>
          <a-col :span="6">
            <div style="margin-right: 12px">
              <a-form-model-item prop="orderType">
                <a-select
                  v-model="queryParam.orderType"
                  style="width: 100%; margin-top: 4px"
                  placeholder="请选择订单类型"
                  allowClear
                >
                  <a-select-option v-for="(item, index) in outOrderTypes" :key="index" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </div>
          </a-col>
          <a-col :span="6">
            <div style="margin-right: 12px">
              <a-form-model-item prop="createBy"
                ><a-input v-model="queryParam.createBy" placeholder="请输入创建人" allowClear />
              </a-form-model-item>
            </div>
          </a-col>
          <a-col :span="6">
            <div style="margin-right: 12px">
              <a-form-model-item prop="warehourse">
                <a-select
                  v-model="queryParam.warehourse"
                  showSearch
                  style="width: 100%; margin-top: 4px"
                  placeholder="请选择所属仓库"
                  allowClear
                >
                  <a-select-option v-for="(item, index) in warehouseOptions" :key="index" :value="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </div>
          </a-col>
          <a-col :span="6">
            <div style="margin-right: 12px">
              <a-form-model-item prop="createTime"
                ><a-date-picker
                  v-model="queryParam.createTime"
                  valueFormat="YYYY-MM-DD"
                  placeholder="请选择创建日期"
                  style="width: 100%"
                  allowClear
              /></a-form-model-item>
            </div>
          </a-col>
          <a-col :span="8">
            <div style="margin-top: 4px">
              <a-button style="margin-right: 20px" @click="searchQuery()" type="primary"> 查询 </a-button>
              <a-button style="margin-right: 20px" @click="addOrder()" type="primary"> 新增出库单 </a-button>
              <a-upload
                name="file"
                :showUploadList="false"
                :multiple="false"
                :headers="tokenHeader"
                :action="importExcelUrl"
                @change="uploadFileFun"
                ><a-button type="primary" icon="import" style="margin-right: 20px">导入</a-button></a-upload
              >
              <a-button style="margin-right: 20px" @click="searchReset()"> 重置 </a-button>
            </div>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <!-- <div class="search-wrap">
      <a-input-search
        v-model="queryParam.orderNo"
        placeholder="请输入单据编号查询"
        enter-button="查询"
        style="width: 400px"
        @search="searchQuery"
      />
      <a-button style="margin-left: 20px" @click="addOrder()"> 新增出库单 </a-button>
    </div> -->
    <div class="table-wrap">
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @change="handleTableChange"
      >
        <span slot="state" slot-scope="text, record">
          <a-tag :color="onColor(text)">
            {{ OnStatue(text) }}
          </a-tag>
        </span>
        <template slot="warehourse" slot-scope="text">
          {{ handleWarehourse(text) }}
        </template>
        <span slot="orderType" slot-scope="text, record">
          {{ onOrderType(text) }}
        </span>
        <span slot="custom" slot-scope="text, record">
          {{ text.orderType * 1 === 1 ? text.companyTo : text.targetWarehourse }}
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="goInfo(record)"> 详情 </a-button>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多<a-icon type="down" /></a>
            <a-menu slot="overlay">
              <!-- <a-menu-item> 编辑 </a-menu-item> -->
              <a-menu-item v-if="record.state * 1 == 2" @click="goInfo(record)"> 审核 </a-menu-item>
              <a-menu-item v-if="[0, 1].indexOf(record.state * 1) > -1" @click="goScan(record)"> 扫描 </a-menu-item>
              <a-menu-item v-if="record.state * 1 == 3" @click="goInfo(record)"> 出库 </a-menu-item>
              <a-menu-item @click="seeTrack(record)"> 轨迹 </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>
    <modal-order-track ref="orderTrack" />
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mapState, mapGetters } from 'vuex'
import { queryOutOrderTrack } from '@/api/order.js'
import { stateObjToArray } from '@/utils/common.js'
import ModalOrderTrack from './components/modal-order-track.vue'
export default {
  data() {
    return {
      columns: [
        {
          title: '单据编号',
          align: 'center',
          dataIndex: 'orderNo',
        },
        {
          title: '客户',
          align: 'center',
          scopedSlots: { customRender: 'custom' },
        },
        {
          title: '订单类型',
          align: 'center',
          scopedSlots: { customRender: 'orderType' },
        },
        {
          title: '订单状态',
          align: 'center',
          scopedSlots: { customRender: 'state' },
        },
        {
          title: '所属仓库',
          align: 'center',
          scopedSlots: { customRender: 'warehourse' },
        },
        {
          title: '创建人',
          align: 'center',
          dataIndex: 'createBy',
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createTime',
        },
        {
          title: '更新人',
          align: 'center',
          dataIndex: 'updateBy',
        },
        {
          title: '更新时间',
          align: 'center',
          dataIndex: 'updateTime',
        },
        {
          title: '操作',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/wms/wmsOutOrder/list',
        importExcelUrl: 'wms/wmsOutOrderSpec/importExcel',
        delete: '/wms/wmsOutOrderSpec/delete'
      },
      searchText: undefined,
      disableMixinCreated: true,
    }
  },
  components: { ModalOrderTrack },
  mixins: [JeecgListMixin],
  computed: {
    ...mapGetters(['userInfo']),
    ...mapState({
      outOrderStates: (s) => s.order.outOrderStates,
      outOrderTypes: (s) => {
        return stateObjToArray(s.order.outOrderTypes)
      },
      outOrderTypeObj: (s) => s.order.outOrderTypes,
      stateOptions: (s) => {
        return stateObjToArray(s.order.outOrderStates)
      },
      warehouseOptions: (s) => {
        return stateObjToArray(s.dictionary.enableWarehouse)
      },
      enableWarehouse: (s) => s.dictionary.enableWarehouse,
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}${this.url.importExcelUrl}`
      },
    }),
  },
  mounted() {
    this.$set(this.queryParam, 'warehourse', this.userInfo.currWarehouse)
    this.searchQuery()
  },
  methods: {
    async seeTrack(e) {
      try {
        const params = { orderNo: e.orderNo }
        const r = await queryOutOrderTrack(params)
        this.$refs.orderTrack.open({
          items: r.result.map((e) => {
            return {
              time: e.createTime,
              operator: e.createBy,
              content: e.content,
            }
          }),
        })
      } catch (_) {}
    },
    searchReset() {
      this.$set(this.queryParam, 'orderNo', undefined)
      this.$set(this.queryParam, 'state', undefined)
      this.$set(this.queryParam, 'createBy', undefined)
      this.$set(this.queryParam, 'createTime', undefined)
      this.$set(this.queryParam, 'orderType', undefined)
      this.$set(this.queryParam, 'warehourse', undefined)
    },
    handleWarehourse(e) {
      const row = this.enableWarehouse[e.warehourse]
      if (row) {
        return row.text
      } else {
        return ''
      }
    },
    addOrder() {
      this.$router.push({
        path: '/out-warehouse-order-add',
      })
    },
    goScan(e) {
      this.$router.push({
        path: '/out-warehouse-order-scan',
        query: { id: e.id },
      })
    },
    goInfo(e) {
      this.$router.push({
        path: '/out-warehouse-order-info',
        query: { id: e.id },
      })
    },
    onColor({ state }) {
      const o = this.outOrderStates[state]
      if (o) {
        return o.color
      } else {
        return ''
      }
    },
    OnStatue({ state }) {
      const o = this.outOrderStates[state]
      if (o) {
        return o.text
      } else {
        return ''
      }
    },
    onOrderType({ orderType }) {
      const o = this.outOrderTypeObj[orderType]
      return o ? o.text : ''
    },
    // 导入文件
    uploadFileFun(info) {
      if (info.file.status !== 'uploading' && info.file.response.state != 200) {
        if (info.file.response.success) {
          this.$message.success(info.file.response.result)
          this.searchQuery()
        } else {
          this.$message.error(info.file.response.message)
        }
      } 
      if(info.fileList[0].status == 'error') {
        return
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.search-wrap {
  margin-bottom: 24px;
}
.search-title {
  font-size: 16px;
  font-weight: 650;
  margin-bottom: 10px;
  color: #e55050;
}
</style>
